<style>
    .flash-message {
      width: 100%;
      justify-content: center;
      align-items: center;
      z-index: 1050;
    }

    .flash-message .alert {
      width: 100%;
      text-align: center;
    }

</style>

<div class="flash-message">
{% with messages = get_flashed_messages() %}
  {% if messages %}
    <div class="alert alert-info">
      {{ messages[0] }}
    </div>
  {% endif %}
{% endwith %}
</div>

<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    const flashMessage = document.querySelector('.flash-message');
    if (flashMessage) {
      flashMessage.style.display = 'block';
      setTimeout(() => {
        flashMessage.style.display = 'none';
      }, 3000);
    }
  });
</script>